//数据总览的最新数据
var tableData = [];
//智能学生证激活量、2.4G考勤卡激活量、缴费量、x轴数据
var intelligentData = [],cardData = [],payPraceData = [],ThiPointFXData = [],xAxisData = [];
var myChart = "",option = "";
//表单组件
var Table = React.createClass({
    render: function () {
        return (
            <tr>
                <td className="table-tr-left-border">{this.props.devicetypename}</td>
                <td className="table-tr-left-border activation">{this.props.devicecounts}</td>
                <td className={this.props.validcounts==null?"table-tr-left-border contentIsNull":"table-tr-left-border pay "}><span>{this.props.validcounts==null?"":this.props.validcounts}</span></td>
                <td className={this.props.paycounts==null?"table-tr-left-border contentIsNull":"table-tr-left-border"}><span>{this.props.paycounts==null?"":this.props.paycounts}</span></td>
            </tr>
        );
    }
});
var Main = React.createClass({
    getInitialState: function () {
        return {
            tableData:this.props.tableData,
            intelligentData:this.props.intelligentData,
            cardData:this.props.cardData,
            payPraceData:this.props.payPraceData,
            ThiPointFXData:this.props.ThiPointFXData,
            xAxisData:this.props.xAxisData,
        }
    },
    componentDidMount: function () {
        var svar = this;
        suixun.ajax(serverUrl+'/workspaceManager/statDeviceList.json','',"get",function(data){
            setTimeout(function () {
                suixun.hideLoding();//隐藏加载中
            },200);
            if(data.code == 200){
                for(var i=0;i<data.info.length;i++){
                    var obj=data.info[i];
                    tableData[i] = {devicetype:obj.devicetype,devicetypename:obj.devicetypename,devicecounts:obj.devicecounts,validcounts:obj.validcounts,paycounts:obj.paycounts,onlinecounts:obj.onlinecounts,offlinecounts:obj.offlinecounts};
                }
                svar.setState({tableData:tableData});
            }
        });
        myChart = echarts.init(document.getElementById('dendrogram-centent'));
        suixun.ajax(serverUrl+'/workspaceManager/statDeviceListByDate.json','',"get",function(data){
            var i=0,maxNumber = 0;
            if(data.code == 200){
                for(var key in data.info[0]){
                    if(data.info[0][key].validcounts!=null && data.info[0][key].validcounts > maxNumber){
                        maxNumber = data.info[0][key].validcounts;
                    }
                    intelligentData[i]=data.info[0][key].validcounts!=null?data.info[0][key].validcounts:0;
                    xAxisData[i++]=key;
                }
                i=0;
                for(var key in data.info[1]){
                    if(data.info[1][key].validcounts!=null && data.info[1][key].validcounts > maxNumber){
                        maxNumber = data.info[1][key].validcounts;
                    }
                    cardData[i++]=data.info[1][key].validcounts!=null?data.info[1][key].validcounts:0;
                }
                i=0;
                for(var key in data.info[2]){
                    if(data.info[2][key].paycounts!=null && data.info[2][key].paycounts > maxNumber){
                        maxNumber = data.info[2][key].paycounts;
                    }
                    payPraceData[i++]=data.info[2][key].paycounts!=null?data.info[2][key].paycounts:0;
                }
                i=0;
                for(var key in data.info[3]){
                    if(data.info[3][key].validcounts!=null && data.info[3][key].validcounts > maxNumber){
                        maxNumber = data.info[3][key].validcounts;
                    }
                    ThiPointFXData[i++]=data.info[3][key].validcounts!=null?data.info[3][key].validcounts:0;
                }
                svar.setState({cardData:cardData,intelligentData:intelligentData,payPraceData:payPraceData,xAxisData:xAxisData,ThiPointFXData:ThiPointFXData});
                if(maxNumber == 1 || maxNumber == 0){
                    maxNumber = 1;
                }else if(maxNumber == 2){
                    maxNumber = 2;
                }else if(maxNumber == 3){
                    maxNumber = 3;
                }else if(maxNumber == 4){
                    maxNumber = 4;
                }else{
                    maxNumber = 5;
                }
                option = {
                    tooltip : {
                        trigger: 'item',// axis
                        showDelay : 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                        axisPointer : {// 坐标轴指示器，坐标轴触发有效
                            type : 'line',// 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    calculable : false,
                    xAxis : [
                        {
                            name:'日期',
                            type : 'category',
                            data : svar.state.xAxisData,
                            splitLine:{
                                show:false
                            }
                        }
                    ],

                    yAxis : [
                        {
                            name:'台',
                            type : 'value',
                            splitNumber: maxNumber,
                            boundaryGap: false,
                            axisLabel : {
                                formatter: function (value, index) {
                                    return ''+value.toFixed(0)+'';
                                }
                            },
                            splitLine:{
                                show:false//横起的线
                            },
                            axisLine:{
                                onZero:true,
                            }

                        }
                    ],
                    series : [
                        {
                            name:'智能学生证激活量',
                            type:'bar',
                            barWidth: 20,
                            itemStyle:{
                                normal:{color:'#1ec94a'}
                            },
                            data:svar.state.intelligentData
                        },
                        {
                            name:'2.4G考勤卡激活量',
                            type:'bar',
                            barWidth: 20,
                            itemStyle:{
                                normal:{color:'#faba00'}
                            },
                            data:svar.state.cardData
                        },
                        {
                            name:'缴费量',
                            type:'bar',
                            barWidth: 20,
                            itemStyle:{
                                normal:{color:'#01b4ee'}
                            },
                            data:svar.state.payPraceData
                        },
                        {
                            name:'13.56考勤卡激活量',
                            type:'bar',
                            barWidth: 20,
                            itemStyle:{
                                normal:{color:'#347fff'}
                            },
                            data:svar.state.ThiPointFXData
                        }
                    ]
                };
                myChart.setOption(option);
            }

        });
        // 指定图表的配置项和数据
        //intelligentData = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6], //
        //cardData = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
        //payPraceData = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 195.6],
        //xAxisData = ['10/19','10/20','10/21','10/22','10/23','10/24','10/25'];
        // 使用刚指定的配置项和数据显示图表。
        //myChart.setOption(option);

    },
    render: function () {
        {
            var Tabels = this.state.tableData.map(function (data) {
                return (
                    <Table key={data.devicetype} devicetypename={data.devicetypename} devicecounts={data.devicecounts} validcounts={data.validcounts} paycounts={data.paycounts} onlinecounts={data.onlinecounts} offlinecounts={data.offlinecounts} />
                )
            })
        }
        return (
            <div className="tableManage-body">
                <div className="message">
                    <img className="message-img" src="../img/icon/horn.png" />
                    <span className="message-user">黄兴州</span>
                    <span className="message-content">成都市沙湾小学新增了一台设备，设备IMEI号为1654684165453465463156!</span>
                    <span className="message-time">2017-1-3 17:30:09</span>
                </div>
                <header>
                    <div className="header-left">
                        <div className="header-left-studentInfo">首页信息</div>
                    </div>
                </header>
                <div className="statistical-analysis">
                    <div className="statistical-analysis-top">
                        <div className="statistical-analysis-top-left">
                            <div className="statistical-analysis-top-left-title">数据总览</div>
                            <div className="statistical-analysis-top-left-text">
                                <img src="../img/icon/annotations.png" />
                                <span/>
                                <div>这里是注释。</div>
                            </div>
                        </div>
                        <div className="statistical-analysis-top-right">数量单位：台</div>
                    </div>
                    <div className="statistical-analysis-content">
                        <table>
                            <thead>
                            <th></th>
                            <th>设备总量</th>
                            <th>激活量</th>
                            <th>有效设备量</th>
                            </thead>
                            <tbody>
                                {this.state.tableData==""?'':Tabels}
                            </tbody>
                        </table>
                        {this.state.tableData==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                    </div>
                </div>
                <div className="statistical-analysis">
                    <div className="statistical-analysis-top">
                        <div className="statistical-analysis-top-left">
                            <div className="statistical-analysis-top-left-title">一周趋势</div>
                            <div className="statistical-analysis-top-left-text">
                                <img src="../img/icon/annotations.png" />
                                <span/>
                                <div>这里是注释。</div>
                            </div>
                        </div>
                    </div>
                    <div className="statistical-analysis-content dendrogram">
                        <div className="dendrogram-query">
                            <div className="dendrogram-query-right">
                                <div><span style={{background:"#01b4ee"}}/>缴费量</div>
                                <div style={{marginRight:"30px"}}><span style={{background:"#faba00"}}/>2.4G考勤卡激活量</div>
                                <div style={{marginRight:"30px"}}><span style={{background:"#347fff"}}/>13.56考勤卡激活量</div>
                                <div style={{marginRight:"30px"}}><span style={{background:"#1ec94a"}}/>智能学生证激活量</div>
                            </div>
                        </div>
                        <div className="dendrogram-centent" id="dendrogram-centent">
                        </div>
                    </div>
                </div>
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        )
    }
});
ReactDOM.render(
    <Main tableData={tableData} intelligentData={intelligentData} cardData={cardData} payPraceData={payPraceData} xAxisData={xAxisData} ThiPointFXData={ThiPointFXData} />,
    document.getElementById('tableManage')
);
$(window).resize(function () {
    myChart = echarts.init(document.getElementById('dendrogram-centent'));
    myChart.showLoading();
    myChart.setOption(option);
    myChart.hideLoading();
});